<script>
	import { mapMutations } from "vuex"
	export default {
		onLaunch: function() {
			console.log('App Launch')
			// 检测小程序版本更新
			this.UpdateManager()
			// 获取所有角标
			this.getAllBadge()
			// 直接登录
			this.login()
			// 获取发布话题分类
			this.getPublishCates()
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		},
		methods: {
			...mapMutations('m_page', ['updatePublishCates']),
			...mapMutations('m_user', ['updateLogin', 'updateOpenStatus']),
			// 提醒更新
			UpdateManager() {
				const updateManager = uni.getUpdateManager() // 小程序版本更新管理器
				updateManager.onCheckForUpdate( res => { // 检测新版本后的回调
					if ( res.hasUpdate ) { // 如果有新版本提醒并进行强制升级
						uni.showModal({
							title: '更新提示',
							content: '新版本已经准备好，是否重启应用？',
							success: (res) => {
								if (res.confirm) {
									//2. 用户确定下载更新小程序，小程序下载及更新静默进行
									this.downLoadAndUpdate(updateManager)
								} else if (res.cancel) {
									//用户点击取消按钮的处理，如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了
									uni.showModal({
										title: '温馨提示',
										content: '本次版本更新涉及到新的功能添加，旧版本无法正常访问',
										showCancel: false, //隐藏取消按钮
										confirmText: "确定更新", //只保留确定更新按钮
										success: (res) => {
											if (res.confirm) {
												//下载新版本，并重新应用
												this.downLoadAndUpdate(updateManager)
											}
										}
									})
								}
							}
						})
					}
				})
			},
			// 下载更新小程序方法
			downLoadAndUpdate(updateManager) {
				updateManager.onUpdateReady(res => { // 新版本下载完成的回调
					updateManager.applyUpdate() // 强制当前小程序应用上新版本并重启
				})

				updateManager.onUpdateFailed(res => { // 新版本下载失败的回调
					// 新版本下载失败，提示用户删除后通过冷启动重新打开
					uni.showModal({
						content: '下载失败，请删除当前小程序后重新打开',
						showCancel: false,
						confirmText: '知道了'
					})
				})
			},
			
			// 直接登录
			login() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log('wxlogin success:', res)
						this.$api.WXLogin({
							code: res.code
						}).then(res => {
							console.log('apilogin success', res)
							// 登录成功
							if (res.data.code == 200) {
								// 处理参数
								let params = {
									userId: res.data.data.id,
									token: res.data.data.token,
									nickName: res.data.data.nickName,
									avatar: res.data.data.icon?res.data.data.icon:'',
									phone: res.data.data.phone?res.data.data.phone:'',
									isAuthent: res.data.data.isAuthent,
									userType: res.data.data.type
								}
								// 将当前用户名字和头像存储到本地
								this.updateLogin(params)
							}
						}).catch(err => {
							console.log('apilogin fail', err)
						})
					},
					fail: (err) => {
						console.log('wxlogin fail:', err)
					}
				})
			},
			
			// 获取发布话题分类和开关状态
			async getPublishCates() {
				let publishCates = await this.getPostTypeList()
				this.updatePublishCates(publishCates)
				let openStatus = await this.getOpenStatus()
				this.updateOpenStatus(openStatus)
			}
		},
	}
</script>

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import url("@/static/font/iconfont.css");
	@import "@/uni_modules/uview-ui/index.scss";
	/*每个页面公共css */
	page {
		background: $uni-bg-color-grey;
		.page-container {
			box-sizing: border-box;
			min-height: 100vh;
			position: relative;
		}
		// 盒子padding
		.pall-base {
			padding: 20rpx;
		}
		.pall-l {
			padding: 24rpx;
		}
		.pall-lg {
			padding: 30rpx;
		}
		.prow-s {
			padding-left: 10rpx;
			padding-right: 10rpx;
		}
		.prow-base {
			padding-left: 20rpx;
			padding-right: 20rpx;
		}
		.prow-l {
			padding-left: 24rpx;
			padding-right: 24rpx;
		}
		.prow-lg {
			padding-left: 30rpx;
			padding-right: 30rpx;
		}
		.pcol-s {
			padding-top: 10rpx;
			padding-bottom: 10rpx;
		}
		.pcol-m {
			padding-top: 12rpx;
			padding-bottom: 12rpx;
		}
		.pcol-base {
			padding-top: 16rpx;
			padding-bottom: 16rpx;
		}
		.pcol-l {
			padding-top: 20rpx;
			padding-bottom: 20rpx;
		}
		.pcol-lg {
			padding-top: 24rpx;
			padding-bottom: 24rpx;
		}
		// 静态区域
		.static-area {
			padding-top: 10rpx;
		}
		// 盒子margin
		.mt-10 {
			margin-top: 10rpx;
		}
		.mb-10 {
			margin-bottom: 10rpx;
		}
		.ml-10 {
			margin-left: 10rpx;
		}
		.mr-10 {
			margin-right: 10rpx;
		}
		.mb-m {
			margin-bottom: 16rpx;
		}
		.mt-base {
			margin-top: 20rpx;
		}
		.mb-base {
			margin-bottom: 20rpx;
		}
		.ml-base {
			margin-left: 20rpx;
		}
		.mr-base {
			margin-right: 20rpx;
		}
		.ml-l {
			margin-left: 24rpx;
		}
		.mr-l {
			margin-right: 24rpx;
		}
		.mt-l {
			margin-top: 24rpx;
		}
		.mb-l {
			margin-bottom: 24rpx;
		}
		.mcol-m {
			margin-top: 16rpx;
			margin-bottom: 16rpx;
		}
		.mcol-l {
			margin-top: 24rpx;
			margin-bottom: 24rpx;
		}
		.mrow-base {
			margin-left: 20rpx;
			margin-right: 20rpx;
		}
		.mrow-l {
			margin-left: 24rpx;
			margin-right: 24rpx;
		}
		// 盒子弧度
		.radius-circle {
			border-radius: 50%;
		}
		.radius-lg {
			border-radius: $uni-border-radius-lg;
		}
		.radius-l {
			border-radius: $uni-border-radius-l;
		}
		.radius-base {
			border-radius: $uni-border-radius-base;
		}
		// 盒子背景颜色
		.back-white {
			background: $uni-bg-color;
		}
		.back-grey {
			background: $uni-bg-color-grey;
		}
		.back-grey-light {
			background: #f8f8f8;
		}
		.back-text-grey {
			background: $uni-text-color-grey-light;
		}
		.back-red {
			background: $uni-color-red;
		}
		.back-orange {
			background: #ffd8bb;
		}
		.back-orange-dark {
			background: #ffa600;
		}
		.back-gold {
			background: $uni-color-gold;
		}
		.back-dark {
			background: #333333;
		}
		.back-primary {
			background: $uni-color-primary;
		}
		.back-primary2 {
			background: $uni-color-primary2;
		}
		// 布局
		.row-box {
			display: flex;
			align-items: center;
			&.sb {
				justify-content: space-between;
			}
			&.center {
				justify-content: center;
			}
			&.right {
				justify-content: flex-end;
			}
			&.start {
				align-items: flex-start;
			}
			&.end {
				align-items: flex-end;
			}
		}
		.col-box {
			display: flex;
			flex-direction: column;
			&.center {
				align-items: center;
			}
			&.right {
				align-items: flex-end;
			}
			&.sb {
				justify-content: space-between;
			}
			&.mid {
				justify-content: center;
			}
		}
		.row-grid-box {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(100rpx, 1fr));
		}
		.image-box {
			position: relative;
			.dot32 {
				width: 32rpx;
				height: 32rpx;
				border-radius: $uni-border-radius-circle;
				background: $uni-color-red;
				position: absolute;
				top: 0rpx;
				right: -16rpx;
			}
		}
		// 文本
		text {
			font-size: $uni-font-size-base;
			color: $uni-text-color;
			line-height: 40rpx;
			&.s34 {
				font-size: 34rpx;
			}
			&.s32 {
				font-size: 32rpx;
			}
			&.s30 {
				font-size: 30rpx;
			}
			&.s26 {
				font-size: 26rpx;
			}
			&.s24 {
				font-size: 24rpx;
			}
			&.s22 {
				font-size: 22rpx;
			}
			&.s20 {
				font-size: 20rpx;
			}
			&.bold {
				font-weight: bold;
			}
			&.primary {
				color: $uni-color-primary;
			}
			&.primary2 {
				color: $uni-color-primary2;
			}
			&.grey-light {
				color: $uni-text-color-grey-light;
			}
			&.grey-dark {
				color: $uni-text-color-grey-dark;
			}
			&.red {
				color: $uni-color-red;
			}
			&.blue {
				color: $uni-color-blue;
			}
			&.orange {
				color: #f98226;
			}
			&.gold {
				color: $uni-color-gold;
			}
			&.white {
				color: $uni-color-white;
			}
			&.limit1 {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;  //使用自适应布局
				-webkit-line-clamp: 1;  //设置超出行数，要设置超出几行显示省略号就把这里改成几
				-webkit-box-orient: vertical;
			}
			&.limit2 {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;  //使用自适应布局
				-webkit-line-clamp: 2;  //设置超出行数，要设置超出几行显示省略号就把这里改成几
				-webkit-box-orient: vertical;
			}
			&.limit4 {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;  //使用自适应布局
				-webkit-line-clamp: 2;  //设置超出行数，要设置超出几行显示省略号就把这里改成几
				-webkit-box-orient: vertical;
			}
			&.right {
				text-align: right;
			}
		}
		.placeholder, .input {
			line-height: 28rpx;
		}
		.placeholder {
			font-size: 28rpx;
			color: $uni-text-color-placeholder;
			font-weight: normal;
		}
		.input {
			width: 100%;
			font-size: 28rpx;
			color: $uni-text-color;
		}
		// 图片图标
		.icon30 {
			display: block;
			width: 30rpx;
			height: 30rpx;
		}
		.icon32 {
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
		.icon36 {
			display: block;
			width: 36rpx;
			height: 36rpx;
		}
		.icon40 {
			display: block;
			width: 40rpx;
			height: 40rpx;
		}
		.icon48 {
			display: block;
			width: 48rpx;
			height: 48rpx;
		}
		.icon64 {
			display: block;
			width: 64rpx;
			height: 64rpx;
		}
		.icon72 {
			display: block;
			width: 72rpx;
			height: 72rpx;
		}
		.icon80 {
			display: block;
			width: 80rpx;
			height: 80rpx;
		}
		// .u-right {
		// 	margin-left: $uni-spacing-row-sm;
		// }
		// 其他通用
		// 宠物列表区域
		.pet-grid {
			display: grid;
			justify-content: space-between;
			&.jp {
				grid-template-columns: repeat(3, 210rpx);
				grid-template-rows: repeat(2, 1fr);
			}
			&.gd {
				grid-template-columns: repeat(2, 320rpx);
				grid-template-rows: repeat(2, 1fr);
			}
			&.index {
				grid-template-columns: repeat(2, 340rpx);
			}
			.grid-item {
				margin-bottom: 24rpx;
			}
		}
		// 上传区域
		.upload-grid {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			column-gap: 20rpx;
			justify-content: space-between;
		}
		.upload-item {
			position: relative;
			width: 168rpx;
			height: 168rpx;
			border-radius: $uni-border-radius-l;
			.icon-box {
				width: 48rpx;
				height: 48rpx;
				background: #d6d6d6;
				position: absolute;
				top: -10rpx;
				right: -16rpx;
			}
		}
		.upload-item-idcard {
			position: relative;
			width: 320rpx;
			height: 194rpx;
			border-radius: $uni-border-radius-l;
			.icon-box {
				width: 48rpx;
				height: 48rpx;
				background: #d6d6d6;
				position: absolute;
				top: -10rpx;
				right: -16rpx;
			}
		}
		.upload-image {
			width: 100%;
			height: 100%;
			border-radius: $uni-border-radius-l;
		}
		// 提交按钮盒子
		.submit-button-box {
			padding-top: 68rpx;
			padding-bottom: 36rpx;
		}
		// 提交按钮
		.submit-button {
			width: 672rpx;
			text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			color: $uni-text-color-inverse;
			margin: 0 auto;
		}
		// 动态瀑布流
		.post-area {
			
			&::after {
				display: table;
				content:"";
				clear: both;
			}
		}
		// 按钮
		button {
			margin: 0;
			padding: 0;
			&::after {
				border: none;
			}
		}
		// 悬浮球
		.ball {
			width: 108rpx;
			height: 108rpx;
			border-radius: 50%;
			border: 4rpx solid #ffffff;
			background: $uni-color-primary;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: fixed;
			right: 32rpx;
			bottom: 0rpx;
			transform: translateY(-50%);
			z-index: 999;
		}
	}
</style>
